@import "header.html"
<link rel="stylesheet" href="../css/find.css">

<body>
<main id="main">
    <div id="banner" style="background-image: url(../image/index/index_banner.jpg)"></div>
    <div id="search-btn" :class="{'hidden':!searchBtn}">
        <div class="bg-mid" @click="goPage('select_city.html')">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-search-o"></use>
            </svg>
            <span>搜索房源</span>
        </div>
    </div>
    <section class="line-transverse" style="position: relative">
        <div class="city-house">
            <div class="city-title look-more">
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuxian"></use>
                    </svg>
                    <span class="city-name" v-cloak>热门城市</span>
                </div>
                <div class="des" @click="goPage('select_city.html')">
                    查看更多
                    <svg class="icon">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </div>
            </div>
            <div class="city-group">
                <div class="city-item" @click="reqCityHouseList('110100')"
                     style="background-image: url('../image/city_find/city-beijing.png')">
                    <span class="filter-bg"></span>
                    <span class="city-name">北京</span>
                </div>
                <div class="city-item" @click="reqCityHouseList('310000')"
                     style="background-image: url('../image/city_find/city-shanghai.png')">
                    <span class="filter-bg"></span>
                    <span class="city-name">上海</span>
                </div>
                <div class="city-item" @click="reqCityHouseList('510100')"
                     style="background-image: url('../image/city_find/city-chengdu.png')">
                    <span class="filter-bg"></span>
                    <span class="city-name">成都</span>
                </div>
                <div class="city-item" @click="reqCityHouseList('500100')"
                     style="background-image: url('../image/city_find/city-chongqing.png')">
                    <span class="filter-bg"></span>
                    <span class="city-name">重庆</span>
                </div>
                <div class="city-item" @click="reqCityHouseList('610100')"
                     style="background-image: url('../image/city_find/city-xian.png')">
                    <span class="filter-bg"></span>
                    <span class="city-name">西安</span>
                </div>
            </div>
        </div>
    </section>
    <section :class="{'line-transverse':i<city.length-1}" style="position: relative" v-for="(v, i) of city">
        <div class="city-house">
            <div class="city-title look-more" @click="reqCityHouseList(v.city.city_id)">
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuxian"></use>
                    </svg>
                    <span class="city-name" v-cloak>{{v.city.name}}</span>
                </div>
                <div class="des">
                    查看更多
                    <svg class="icon">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </div>
            </div>
            <div class="city-house-group">
                <div class="city-house-item" :class="{'ont-item':v.list.length===1}" v-for="house of v.list" @click="goPages('house_res_detail.html',{
                    data:{
                        id:house.id
                    }
                })">
                    <div class="house-img" :data-url="fxiImg(house.img)"></div>
                    <div>
                        <div class="house-des">
                            <span class="house-title" v-cloak>{{house.title}} </span>
                            <span class="money" v-cloak><span class="dollar">￥</span>{{house.price_low}}</span>
                        </div>
                        <div class="house-address">
                            <span v-cloak>单间出租/可住{{house.people}}人-已定{{house.day}}晚</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

@import "js.html"
<script src="../script/find.js"></script>
</body>
@import "footer.html"